<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>Japanese Chalkboard</title>
	<meta name="viewport" content="width=device-width,initial-scale=1">

	<link rel="shortcut icon" type="image/ico" href="images/favicon.ico">
	<meta name="msapplication-task" content="Japanese Chalkboard">
	<meta property="og:image" content="images/screenshot_small.png"/>
	<meta property="og:title" content="Japanese Chalkboard (for IE10 Test Drive)"/>
	<meta name="description" content="This is an example using HTML5 WebSocket. Multiple users can write this chalkboard at the same time.">

	<link rel="stylesheet" href="css/style.css">
	<link rel="stylesheet" href="css/index.css">
	<link rel="stylesheet" href="css/ReturnAndShareControls.css">
	<script src="lib/js/modernizr-2.0.6.min.js"></script>

  
    
</head>
<body>

<div id="container">
<!--	<h1 id="logoImg" class="bounceInDown">
		<img src="images/logo.png" alt="Japanese Chalkboard" width=564 height=65>
	</h1>
-->
	<h1 id="logoImg">	
		<img class="bounceInDown" src="images/logo_1j.png" alt="Japanese Chalkboard" style="float:left;">
        <img class="bounceInDown2" src="images/logo_2a.png" alt="Japanese Chalkboard" style="float:left;">
		<img class="bounceInDown" src="images/logo_3p.png" alt="Japanese Chalkboard" style="float:left;">
		<img class="bounceInDown3" src="images/logo_4a.png" alt="Japanese Chalkboard" style="float:left;">
        <img class="bounceInDown" src="images/logo_5n.png" alt="Japanese Chalkboard" style="float:left;">
		<img class="bounceInDown2" src="images/logo_6e.png" alt="Japanese Chalkboard" style="float:left;">
		<img class="bounceInDown3" src="images/logo_7s.png" alt="Japanese Chalkboard" style="float:left;">
        <img class="bounceInDown" src="images/logo_8e.png" alt="Japanese Chalkboard" style="float:left;">

		<img class="bounceInDown2" src="images/logo_9c.png" alt="Japanese Chalkboard" style="float:left;">
		<img class="bounceInDown3" src="images/logo_10h.png" alt="Japanese Chalkboard" style="float:left;">
        <img class="bounceInDown2" src="images/logo_2a.png" alt="Japanese Chalkboard" style="float:left;">
		<img class="bounceInDown3" src="images/logo_11l.png" alt="Japanese Chalkboard" style="float:left;">
		<img class="bounceInDown2" src="images/logo_12k.png" alt="Japanese Chalkboard" style="float:left;">
        <img class="bounceInDown" src="images/logo_13b.png" alt="Japanese Chalkboard" style="float:left;">
		<img class="bounceInDown2" src="images/logo_14o.png" alt="Japanese Chalkboard" style="float:left;">
		<img class="bounceInDown3" src="images/logo_15a.png" alt="Japanese Chalkboard" style="float:left;">
        <img class="bounceInDown2" src="images/logo_16r.png" alt="Japanese Chalkboard" style="float:left;">
		<img class="bounceInDown" src="images/logo_17d.png" alt="Japanese Chalkboard" style="float:left;">
	</h1>
    
 
    <div id="chalkboardAndOthers">
		<img id="shuji" src="images/shuji.png">
		<img id="clock" src="images/clock.png">
		<canvas id="clock-hands" width="154" height="154"></canvas>
		<img id="paper_pk" src="images/paper_pk.png">
		<img id="global_map" src="images/global_map.jpg">
		<img id="protoractor" src="images/protoractor.png">
		<div id="chalkboard">
			<div id="monthOnBoard"></div>
			<div id="dateOnBoard"></div>
			<div id="loadingMessage">Loading. Please wait...</div>
			<canvas id="canvas" width="710" height="460">
				Your browser is not supported. Use modern browser (e.g. IE9 or later).
			</canvas>
		</div>
		<ul id="colorPalette">
			<li><div class="color" data-color="pink"></div>
			<li><div class="color" data-color="yellow"></div>
			<li><div class="color" data-color="green"></div>
			<li><div class="color" data-color="blue"></div>
			<li><div class="color" data-color="white"></div>
		</ul>
		<div id="eraser"></div>
	</div> 
</div> <!--! end of #container -->
<div id="veil"></div>
<div id="aboutThisExample">このサンプルについて</div>
<section id="descriptionOfThisExample">
	<h1></h1>
	<img id="closeDescriptionButton" src="images/close_button.png">
	<div class="content">
		
	</div>
</section>
<div id="ReturnAndShareControls"></div>
<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
<script>window.jQuery || document.write('<script src="lib/js/jquery-1.7.1.min.js"><\/script>')</script>
<script src="lib/js/jquery.i18n.properties-min-1.0.9.js"></script>

<script src="/socket.io/socket.io.js"></script>
<script src="js/ReturnAndShareControls.js"></script>
<script src="js/common.js"></script>
<script src="js/index.html.js"></script>
<script>
	var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']]; // Change UA-XXXXX-X to be your site's ID
	(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;
	g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
	s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
</body>
</html>
